<template>
  <section class="sdraggable">
    <draggable element="el-collapse" v-model="alistarray" @change="end()">
      <el-collapse-item v-for="(item, index) in alistarray" :key="index">
        <template slot="title">
          <p>
            <span>{{ index + 1 }}</span>
            {{ item.questionName }}
          </p>
          <p>
            <span
              class="iconfont iconkeyichu"
              @click.stop="delitem(index, item)"
            ></span>
            <span class="iconfont iconkeziyoutiaozheng" @click.stop=""></span>
            <!-- <span>下移</span><span>展开</span> -->
          </p>
        </template>
        <div class="listcont" v-if="item.showoptionChildren == 1">
          <li v-for="(i, cIndex) in item.optionChildren" :key="cIndex">
            <div class="divtle">
              {{ i.optionTitle }}
              <span @click="addChildQuestion(i)">添加子问题</span>
            </div>
            <div class="listcontent">
              <sdrg
                :listarray="i.followupTemplateQuestionDtoList"
                @changeDrag="
                  (val) => {
                    dragchange(val, i)
                  }
                "
                @parentmethod="parentmethod"
                @delDrawerCurrent="delDrawerCurrent"
              ></sdrg>
            </div>
          </li>
        </div>
      </el-collapse-item>
    </draggable>
  </section>
</template>

<script>
import draggable from 'vuedraggable'
import sdrg from './sDraggable'
export default {
  name: 'sdrg',
  data() {
    return {
      alistarray: this.listarray,
      childQuestion: {}
    }
  },
  components: {
    draggable,
    sdrg
  },
  props: ['listarray'],
  watch: {
    listarray: function (nv, ov) {
      nv.forEach((element) => {
        if (element.resultType == 'checkbox' || element.resultType == 'radio') {
          element.showoptionChildren = '1'
        } else {
          element.showoptionChildren = '0'
        }
      })
      this.alistarray = nv
    }
  },

  methods: {
    end() {
      this.$emit('changeDrag', this.alistarray)
    },
    //添加子问题
    addChildQuestion(obj) {
      this.parentmethod(obj)
      //   this.$emit("parentmethod", obj);
    },
    //改变子问题位置
    dragchange(val, i) {
      i.followupTemplateQuestionDtoList = val
      console.log(2333, val, i)
    },
    //删除
    //删除问题
    delitem(index, obj, type) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('div', null, [
          h('span', null, '是否确认删除问题：'),
          h('i', { style: 'color: #1677ff' }, obj.questionName)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定删除',
        cancelButtonText: '取消'
      }).then(() => {
        this.alistarray.splice(index, 1)
        this.delDrawerCurrent(obj)
      })
    },
    //子孙组件调用父级
    parentmethod(obj) {
      this.$emit('parentmethod', obj)
    },
    delDrawerCurrent(obj) {
      this.$emit('delDrawerCurrent', obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.sdraggable {
}
</style>
